<template>
	<view class="w100 flex flex_jc flex_wrap">
		<navigator :url="'/pages/news_detail/index?id='+item.id" class="li w710 mt20 flex flex_ac" v-for="(item,index) in list">
			<view class="img">
				<u--image :showLoading="true" :src="item.cover" width="100%" height="100%"></u--image>
			</view>
			<view class="detail flex flex_wrap">
				<view class="name fz40 w100 hidden3">{{item.title}}</view>
				<!-- <view class="introdduce fz25 col_999 hidden4">{{item.introduce}}</view> -->
			</view>
		</navigator>
		
	</view>
</template>

<script>
	import {getBaoluList} from "@/api/api"
	export default {
		data() {
			return {
				page:1,
				list:[],
				count:0,
				tips:'数据加载中',
				
			}
		},
		
		
		onLoad: function (option) {
			this.getBaoluList()
		},
		
		onShow:function(){
			
			
		},
		
		onReachBottom(){
			if(this.list.length>=this.count){
				this.tips = '所有数据加载完成'
			}else{
				this.page += 1
				this.getBaoluList()
			}
		},
	
		methods:{
			
			getBaoluList(){
				getBaoluList(this.page).then(res=>{
					console.log(res)
					this.count = res.data.total
					var data = res.data.data
					for(var i = 0 ;i<data.length;i++){
						var reg = /<img.+?src=('|")?([^'"]+)('|")?(?:\s+|>)/gim;
						var imgsrcArr = [];  
						var tem = '';
						while (tem = reg.exec(data[i].content)) {
							imgsrcArr.push(tem[2]);  
						}  
						data[i].cover = imgsrcArr
						this.list.push(data[i])
					}
					if(this.list.length>=this.count){
						this.tips = '所有数据加载完成'
					}
				})
			},
		
		}
	}
</script>
<style>
	.u-transition{width: 100%;height: 100%;}
</style>
<style scoped>
	.li .detail{width: 490rpx;height: 160rpx;font-weight: bold;}
	.li{border-radius: 20rpx;background-color: #FFFFFF;box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.42);}
	.li .img{width: 160rpx;height: 160rpx;margin: 20rpx;border-radius: 10rpx;overflow: hidden;}
	
</style>